[JavaScript] Input 태그의 체크여부 확인하기, 체크값 불러오기

오늘 알아볼 내용은 입력폼 중 하나인 input 태그가 체크박스 또는 라디오 타입으로 어떤 값을 가지고 있을때 이를 체크하였는지 확인할 수 있는 다양한 방법에 대하여 알아보고자 한다. 방문자가 이를 클릭했을경우 이를 불러오기 위한 방법은 어떤 것이 있을까?

우선 순수 자바스크립트의 방법을 알아보고 제이쿼리를 활용했을때의 방법도 알아볼 것이다. 먼저 자바스크립트를 사용한 방법을 예제와 함께 자세하게 알아보자.

빨간 라인이 방문자가 클릭가능한 라디오 버튼이다.
아래 방법은 순수 자바스크립트 방법을 사용한 방법이다. 사실 최근에는 제이쿼리나 기타 라이브러리를 활용하기 때문에 이 코드는 많이 사용되지 않을 수 있다. 하지만 가장 기본이 되는 방법으로 알아야 할 필요가 있을 것이다.

그럼 아래 예제를 통해 자세히 알아보자... 아래 예제는 먹고 싶은 과일을 체크하는 예제이다.

# input 태그체크 확인하는 예제보기

이 예제는 방문자에게 먹고 싶거나 좋아하는 과일을 선택하도록 하는 설문조사 페이지의 예제이다. 방문자는 선택가능한 과일인 바나나 또는 파인애플 중 먹고 싶은 과일을 체크하게 된다.

이때 우리가 구현할 부분은 방문자가 어떤 과일을 클릭했는가의 내용이다.

! 좋아하는 과일 선택

1번 과일 : 바나나

2번 과일 : 파인애플

먼저 해당 코드의 html은 아래와 같다.

아래는 스크립트 코드이다.

입력된 두 가지 선택 가능한 옵션중에서 사용자가 어떤 것을 클릭했는지 확인하기 위하여 해당하는 DOM요소의 체크 여부를 test1Result 그리고 test2Result에 각각 확인하였다.

참고로 위 예제의 input 태그에 미리 checked라는 속성이 있는 이유는 페이지가 열렸을 경우 먼저 체크되어 있도록 설정하기 위함이다. 이렇게 함으로써 바나나가 기본값으로 설정된 것이다. 

! 제이쿼리를 사용한 방법

앞에도 언급했지만 제이쿼리를 사용하는 방법이 가장 간단한 방법이다. 뒤에는 제이쿼리를 사용하여 체크박스나 라디오 버튼의 체크 여부를 확인하는 방법을 예제와 함께 알아보려 한다.

# 제이쿼리 prop() 메소드 이용한 방법

이번에도 제이쿼리를 사용하며 prop() 메소드로 알 수 있다. prop()는 현재 설정된 속성값과 입력폼의 체크등의 여부를 확인 가능한 매우 유용한 속성이다. 이를 통해 확인하는 방법은 아래와 같다.
결과로 체크 여부에 따라 boolean 타입의 true, false가 반환된다.

# 제이쿼리 is()를 사용한 방법

이 방법 역시 제이쿼리를 사용한 방법으로 is() 메소드는 해당하는 요소의 상태에 따라 옳고 그름을 불리언으로 반환한다. 또한 input 태그의 경우에는 체크 여부도 확인할 수 있는 매우 간편한 메소드라 할 수 있다. 이를 사용하여 확인하는 방법은 아래와 같다.

이번에도 역시 boolean으로 체크가 된 경우 true를 아닌 경우 false를 반환한다.